<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>权限树</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="icon" href="../img/web/web.ico"/>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/app.css"/>
<body ontouchstart="">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">

        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">权限树</div>
                <div class="layui-card-body">一个基于layui扩展的权限树插件</div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header layui-elip">权限树插件,手册: <a target="_blank" href="https://github.com/wangerzi/layui-authtree">https://github.com/wangerzi/layui-authtree</a></div>
                <div class="layui-card-body">

                    <form class="layui-form vip-auth-tree" lay-filter="demo">
                        <div class="layui-form-item">
                            <label class="layui-form-label">角色名称</label>
                            <div class="layui-input-block">
                                <input class="layui-input" type="text" name="name" placeholder="请输入角色名称" />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择权限</label>
                            <div class="layui-input-block">
                                <div id="LAY-auth-tree-index"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" type="submit">提交</button>
                                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                            </div>
                        </div>
                    </form>

                    <!--<div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">内容2-1</div>
                        <div class="layui-col-md6">内容2-2</div>
                    </div>-->
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.config({base: '../js/'}).use(['layer','form','authtree'],function(){
    var $ = layui.$, layer = layui.layer, form = layui.form, authtree = layui.authtree;

    $.ajax({
        url: '../json/demo-auth-tree.json',
        dataType: 'json',
        success: function(data){
            // 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
            authtree.render('#LAY-auth-tree-index', data.data.trees, 'authids[]', 'lay-check-auth');

            // 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
            form.on('checkbox(lay-check-auth)', function(data){
                // 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
                setTimeout(function(){
                    // 获取选中的叶子节点
                    var leaf = authtree.getLeaf('#LAY-auth-tree-index');
                    console.log(leaf);
                }, 100);
            });
        }
    });

    // 提交
    form.on('submit(demo)', function(){

        var leaf = authtree.getLeaf('#LAY-auth-tree-index');
        layer.alert(JSON.stringify(leaf));

        return false;
    });


});
</script>
</body>
</html>